<template>
  <div>
    <van-action-sheet v-model="show" :title="title" @close="handleClose">
      <div class="modal-body">
        <div v-if="type == 'picker'">
          <div class="picker-title" v-if="pickerData.titles.length > 0">
            <div class="title-item" :style="{flex: `0 0 ${countWidth}%`}" v-for="(title,tindex) in pickerData.titles" :key="tindex">{{title}}</div>
          </div>
          <van-picker ref="modalPicker" :columns="pickerData.columns" :visible-item-count="5" :loading="pickerLoading" :value-key="pickerKey"/>
        </div>
        <div v-if="type == 'custom'">
          <slot name="content">

          </slot>
        </div>
        <div class="footer">
          <slot name="footer">
            <div class="footer-btn-group">
              <div class="btn-cancel" @click="cancel">取消</div>
              <div style="width: 15px"></div>
              <div class="btn-confirm" @click="confirm">确定</div>
            </div>
          </slot>
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
  import {
    ActionSheet,
    Picker
  } from 'vant'
  export default {
    name: 'gzModal',
    props: {
      title: {
        type: String,
        default: ''
      },
      showModal: {
        type: Boolean,
        default: false
      },
      type: {
        type: String,
        default: 'custom'
      },
      // type为picker时必传，如有多列、级联需求请参照vant2.x picker column传参,titles 为每列对应的label
      pickerData: {
        type: Object,
        default: () => {
          return {
            titles: [],
            columns: []
          }
        }
      },
      pickerLoading: {
        type: Boolean,
        default: false
      },
      pickerKey: {
        type: String,
        default: 'text'
      }
    },
    model: {
      prop: 'showModal',
      event: 'changeShow'
    },
    components: {
      [ActionSheet.name]: ActionSheet,
      [Picker.name]: Picker
    },
    computed: {
      // 计算picker title单个宽度
      countWidth() {
        let titles = this.pickerData.titles
        let length = titles.length
        let width = (100 / Number(length)).toFixed(2)
        return width
      }
    },
    data() {
      return {
        show: this.showModal
      }
    },
    watch: {
      showModal(val) {
        this.show = val
      }
    },
    methods: {
      handleClose() {
        this.$emit('changeShow', false)
      },

      confirm() {
        let data = {}
        if(this.type == 'picker') {
          data = this.$refs.modalPicker.getValues()
        }
        this.$emit('confirm', data)
      },

      cancel() {
        this.show = false
        this.$emit('cancel')
      }
    }
  }
</script>

<style lang="less" scoped>
  .content {
    padding: 16px 16px 160px;
  }
  /deep/ .van-action-sheet__header {
    font-weight: 500;
    color: #1D2129;
  }

  /deep/ .van-popup--bottom.van-popup--round {
    border-radius: 8px 8px 0 0;
  }

  .modal-body {
    position: relative;
  }

  .picker-title {
    display: flex;
    align-items: center;
    padding: 8px 0;
  }

  .title-item {
    text-align: center;
    font-size: 16px;
    color: #1D2129
  }

  .footer-btn-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    .btn-confirm {
      background-color: #FF4A32;
      color: #FFF;
      font-size: 16px;
      font-weight: 400;
      text-align: center;
      width: 50%;
      padding: 11px;
      border-radius: 4px;
    }
    .btn-cancel {
      background-color: #FEF7F7;
      color: #FF4A32;
      font-size: 16px;
      font-weight: 400;
      text-align: center;
      width: 50%;
      padding: 11px;
      border-radius: 4px;
    }
  }
</style>
